import React, { Component } from 'react';
import { Layout } from 'antd';
import './index.css';
import { Popover, Button, Upload, Input} from 'element-react';
import moment from 'moment';

const { Header } = Layout;
const { ipcRenderer } = require('electron');

class OCRTextShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text:"",
      loading: false
    }
  }
  handleOCR = (file) => {
    this.setState({loading:true});
    ipcRenderer.send('request-ocr', file.path);
    ipcRenderer.on('request-ocr-reply',(event, data) => {
      this.setState({text:data})
      this.setState({loading:false});
    })
    return false;
  }

  render() {
    return (
      <div>
        <Upload beforeUpload={this.handleOCR} listType="picture" showFileList={false}>
          <Button size="mini" loading={this.state.loading}>识别图片</Button>
        </Upload>
        <Input type="textarea" rows={6} style={{width:'95%'}} value={this.state.text} placeholder=""/>
      </div>
    )
  }
}

class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: moment().format("YYYY-MM-DD HH:mm"),
    };
  }

  componentDidMount() {
    setInterval(() => this.tick(), 60*1000);
  }

  tick() {
    this.setState({
      time: moment().format("YYYY-MM-DD HH:mm")
    });
  }

  componentDidUpdate(prepProps, prepState) {
    if (prepState.langValue!==this.state.langValue) {
      window.location.langValue = this.state.langValue;
    }

    if (prepState.lectureValue!==this.state.lectureValue) {
      window.location.lectureValue = this.state.lectureValue;
    }
  }

  render() {
    return (
      <Header className='header' >
        <div style={{display:"inline-block", float:"left"}}>
          {this.state.time}
        </div>
        <div>
          <Popover placement="top-start" width="400" trigger="hover" content={(<OCRTextShow />)}>
            <Button  style={{'margin-left':'5px'}}>OCR识别</Button>
          </Popover>
        </div>
      </Header>
    );
  }
}

export default HeaderComponent;